/**
 * Created by 游永年 on 2019-01-12 01:52.
 * 首页商品列表,todo  这个东西后面要抽出去,别的地方好像有用到
 */

'use strict'
import React from 'react';
import {ListView} from 'antd-mobile';
import Product from "../../../components/Product/Product";
import {connect} from "dva";
import './book.less';

class BookListProducts extends React.Component {
  constructor(props) {
    super(props);
    const getSectionData = (dataBlob, sectionID) => dataBlob[sectionID];
    const getRowData = (dataBlob, sectionID, rowID) => {
      return dataBlob[sectionID][rowID];
    }

    const dataSource = new ListView.DataSource({
      getRowData,
      getSectionHeaderData: getSectionData,
      rowHasChanged: (row1, row2) => row1 !== row2,
      sectionHeaderHasChanged: (s1, s2) => s1 !== s2,
    });
    this.state = {
      dataSource,
      isLoading: true,
      height: window.innerHeight-50,
    };
  }


  UNSAFE_componentWillMount() {
    const {dataSource, dispatch} = this.props;
    if (dataSource.length === 0) dispatch({type: 'book/bookFilter'});
  }

  componentDidMount() {
    if (this.props.dataSource.length > 0) setTimeout(_ => this.init(this.props));
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    this.init(nextProps);
  }

  /**
   * 初始化
   * @param nextProps
   */
  init = (nextProps) => {
    const {dataSource, pagination} = nextProps;
    // this.resolveData(dataSource);
    // const hei = document.documentElement.clientHeight - ReactDOM.findDOMNode(this.lv).parentNode.offsetTop;
    // const hei = (document.documentElement.clientHeight * 3) / 4;
    const hei = window.innerHeight-50;
    //genData();
    const {page} = pagination;
    const dataBlobs = {};
    dataSource.forEach((obj, index) => {
      const rowName = `S ${page}, R${index}`;
      dataBlobs[rowName] = obj;
    });

    this.setState({
      dataSource: this.state.dataSource.cloneWithRows(dataBlobs),
      isLoading: false,
      height: hei,
    });
  }

  UNSAFE_shouldComponentUpdate(nextProps, nextState) {
    if (nextState !== this.state) {
      return true;
    }
    return false;
  }


  render() {
    const separator = (sectionID, rowID) => (
      <div
        key={`${sectionID}-${rowID}`}
        style={{
          backgroundColor: '#F5F5F9',
          height: 8,
          borderTop: '1px solid #ECECED',
          borderBottom: '1px solid #ECECED',
        }}
      />
    );

    const {pagination: {pageSize = 10}} = this.props;

    return (
      <ListView
        renderHeader={this.props.header}
        useBodyScroll={false}
        ref={el => this.lv = el}
        dataSource={this.state.dataSource}
        renderFooter={() => (<div style={{padding: 30, textAlign: 'center'}}>
          {this.state.isLoading ? '加载中' : '到底了'}
        </div>)}
        renderRow={(data) => <Product data={data}/>}
        renderSeparator={separator}
        style={{
          height: this.state.height,
          width: '100%',
          overflow: 'auto',
        }}
        pageSize={pageSize}
        scrollRenderAheadDistance={500}
        onEndReached={this.onEndReached}
        onEndReachedThreshold={500}
      />
    );
  }

  /**
   * 下滚加载下一页
   * @param event
   */
  onEndReached = (event) => {
    const {pagination: {page, pageSize, totalPage}} = this.props;
    let newPage = page + 1;
    if (newPage <= totalPage) {
      this.props.dispatch({type: 'book/bookFilter', body: {pageBean: {pageSize, page: newPage}, title: "tete"}});
    }
  }

}

BookListProducts.propTypes = {};

const opts = ({book}) => {
  const {bookClasses = [], pagination} = book || {};
  return {dataSource: bookClasses, pagination};
};

export default connect(opts)(BookListProducts);
